<template>
	<view class="container">
		<view class="stats-card">
			<view class="card-title">平台概览</view>
			<view class="stats-grid">
				<view class="stats-item">
					<text class="number">{{overview.totalUsers}}</text>
					<text class="label">总用户数</text>
				</view>
				<view class="stats-item">
					<text class="number">{{overview.totalContent}}</text>
					<text class="label">总内容数</text>
				</view>
				<view class="stats-item">
					<text class="number">{{overview.activeUsers}}</text>
					<text class="label">活跃用户</text>
				</view>
				<view class="stats-item">
					<text class="number">{{overview.todayPosts}}</text>
					<text class="label">今日发布</text>
				</view>
			</view>
		</view>
		
		<view class="stats-card">
			<view class="card-title">用户活跃度趋势</view>
			<view class="trend-list">
				<view class="trend-item" v-for="(item, index) in activeUserTrend" :key="index">
					<text class="trend-day">{{item.day}}</text>
					<view class="trend-bar-wrap">
						<view class="trend-bar" :style="{width: item.percentage + '%'}"></view>
					</view>
					<text class="trend-value">{{item.value}}</text>
				</view>
			</view>
		</view>
		
		<view class="stats-card">
			<view class="card-title">内容分类占比</view>
			<view class="category-list">
				<view class="category-item" v-for="(item, index) in contentTypes" :key="index">
					<view class="category-header">
						<text class="category-name">{{item.name}}</text>
						<text class="category-percent">{{item.percent}}%</text>
					</view>
					<view class="category-bar-wrap">
						<view class="category-bar" :style="{width: item.percent + '%'}"></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="stats-card">
			<view class="card-title">热门话题</view>
			<view class="topic-list">
				<view class="topic-item" v-for="(item, index) in hotTopics" :key="index">
					<view class="topic-rank">{{index + 1}}</view>
					<view class="topic-info">
						<text class="topic-name">{{item.name}}</text>
						<text class="topic-count">{{item.count}}次讨论</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="stats-card">
			<view class="card-title">用户年龄分布</view>
			<view class="chart-container">
				<qiun-data-charts 
					type="pie"
					:opts="pieOpts"
					:chartData="pieData"
				/>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const overview = ref({
	totalUsers: 0,
	totalContent: 0,
	activeUsers: 0,
	todayPosts: 0
})

const activeUserTrend = ref([
	{day: '周一', value: 2125, percentage: 65},
	{day: '周二', value: 2368, percentage: 73},
	{day: '周三', value: 2146, percentage: 66},
	{day: '周四', value: 2587, percentage: 80},
	{day: '周五', value: 2897, percentage: 89},
	{day: '周六', value: 3245, percentage: 100},
	{day: '周日', value: 3012, percentage: 93}
])

const contentTypes = ref([
	{name: '生活分享', percent: 35},
	{name: '美食料理', percent: 25},
	{name: '旅行游记', percent: 20},
	{name: '科技资讯', percent: 15},
	{name: '其他', percent: 5}
])

const hotTopics = ref([
	{name: '生活点滴', count: 12345},
	{name: '美食分享', count: 9865},
	{name: '旅行日记', count: 7654},
	{name: '时尚穿搭', count: 5432},
	{name: '科技动态', count: 4321},
	{name: '读书心得', count: 3456},
	{name: '健康生活', count: 2345}
])

const pieOpts = ref({
	title: {
		name: "年龄分布",
		fontSize: 15,
		color: "#666666"
	},
	legend: {
		show: true,
		position: "right",
		lineHeight: 25,
	},
	extra: {
		pie: {
			activeRadius: 10,
			offsetAngle: 0,
			labelWidth: 15,
			border: true,
			borderWidth: 3,
			borderColor: "#FFFFFF"
		}
	}
})

const pieData = ref({
	series: [{
		data: [
			{name: "18岁以下", value: 15},
			{name: "18-24岁", value: 40},
			{name: "25-34岁", value: 25},
			{name: "35-44岁", value: 12},
			{name: "45岁以上", value: 8}
		]
	}]
})

onMounted(() => {
	// 获取平台概览数据
	uni.request({
		url: 'http://localhost:8080/api/stats/overview',
		success: (res) => {
			if (res.data) {
				overview.value = res.data;
			}
		},
		fail: (err) => {
			console.error('获取概览数据失败:', err);
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			});
		}
	});
	
	// 获取活跃用户趋势
	uni.request({
		url: 'http://localhost:8080/api/stats/trends',
		success: (res) => {
			if (res.data) {
				activeUserTrend.value = res.data;
			}
		},
		fail: (err) => {
			console.error('获取趋势数据失败:', err);
		}
	});
	
	// 获取内容分类占比
	uni.request({
		url: 'http://localhost:8080/api/stats/content-types',
		success: (res) => {
			if (res.data) {
				contentTypes.value = res.data;
			}
		},
		fail: (err) => {
			console.error('获取分类数据失败:', err);
		}
	});
	
	// 获取热门话题
	uni.request({
		url: 'http://localhost:8080/api/stats/hot-topics',
		success: (res) => {
			if (res.data) {
				hotTopics.value = res.data;
			}
		},
		fail: (err) => {
			console.error('获取话题数据失败:', err);
		}
	});
	
	// 获取年龄分布
	uni.request({
		url: 'http://localhost:8080/api/stats/age-distribution',
		success: (res) => {
			if (res.data) {
				pieData.value.series[0].data = res.data;
			}
		},
		fail: (err) => {
			console.error('获取年龄分布数据失败:', err);
		}
	});
})
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
}

.stats-card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
}

.card-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.stats-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	background-color: #f8f8f8;
	border-radius: 10rpx;
}

.number {
	font-size: 40rpx;
	font-weight: bold;
	color: #3cc51f;
	margin-bottom: 10rpx;
}

.label {
	font-size: 24rpx;
	color: #666;
}

.trend-list {
	margin-top: 20rpx;
}

.trend-item {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.trend-day {
	width: 80rpx;
	font-size: 24rpx;
	color: #666;
}

.trend-bar-wrap {
	flex: 1;
	height: 30rpx;
	background-color: #f0f0f0;
	border-radius: 15rpx;
	margin: 0 20rpx;
	overflow: hidden;
}

.trend-bar {
	height: 100%;
	background-color: #3cc51f;
	border-radius: 15rpx;
	transition: width 0.3s;
}

.trend-value {
	width: 100rpx;
	font-size: 24rpx;
	color: #666;
	text-align: right;
}

.category-list {
	margin-top: 20rpx;
}

.category-item {
	margin-bottom: 20rpx;
}

.category-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
}

.category-name {
	font-size: 26rpx;
	color: #333;
}

.category-percent {
	font-size: 26rpx;
	color: #666;
}

.category-bar-wrap {
	height: 20rpx;
	background-color: #f0f0f0;
	border-radius: 10rpx;
	overflow: hidden;
}

.category-bar {
	height: 100%;
	background-color: #3cc51f;
	border-radius: 10rpx;
	transition: width 0.3s;
}

.topic-list {
	margin-top: 20rpx;
}

.topic-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.topic-rank {
	width: 40rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	background-color: #f0f0f0;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #666;
	margin-right: 20rpx;
}

.topic-info {
	flex: 1;
}

.topic-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 6rpx;
}

.topic-count {
	font-size: 24rpx;
	color: #999;
}

.topic-item:nth-child(1) .topic-rank {
	background-color: #ff6b6b;
	color: #fff;
}

.topic-item:nth-child(2) .topic-rank {
	background-color: #ff9f43;
	color: #fff;
}

.topic-item:nth-child(3) .topic-rank {
	background-color: #ffd43b;
	color: #fff;
}

.chart-container {
	height: 400rpx;
	width: 100%;
}
</style> 